<template>
  <view class="news-list-container px-[30rpx] py-[20rpx] box-border">
    <view
      class="news-list-item h-[250rpx] mt-[20rpx] px-[30rpx] py-[20rpx] box-border module-part"
      v-for="(item, index) in newsList"
      :key="index"
    >
      <newsItem
        :newsContent="item"
        roundedNum="16rpx"
        @click="scanNewsDetail"
      ></newsItem>
    </view>
    <!-- 加载状态 -->
    <uni-load-more
      :status="loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多了',
      }"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
// 响应式数据

const newsList = reactive([
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题1",
    content: "这是资讯的内容显示",
    viewNum: "1453",
    time: "2025-03-05",
  },
  {
    img: "https://img95.699pic.com/desgin_photo/40179/8146_detail.jpg%21detail860/fw/820/crop/0x0a0a1309/quality/90",
    title: "这是一个资讯的大标题2",
    content:
      "这是资讯的内容显示，从现在开始就是你问他，狼来了，内容展示从现在开始就是你问他，狼来了，内容展示",
    viewNum: "1453",
    time: "2025-03-06",
  },
]);
const list = ref([]);
const currentPage = ref(1);
const total = ref(0);
const loadStatus = ref("more"); // more|loading|noMore
const pageSize = 10;

// 初始化加载
onMounted(() => {
  fetchData();
});

// 上拉加载更多
onReachBottom(() => {
  if (loadStatus.value === "more") {
    currentPage.value++;
    fetchData();
  }
});

// 下拉刷新
onPullDownRefresh(async () => {
  currentPage.value = 1;
  list.value = [];
  await fetchData(true);
  uni.stopPullDownRefresh();
});

// 请求数据
const fetchData = async (isRefresh = false) => {
  if (loadStatus.value === "loading") return;

  loadStatus.value = "loading";

  try {
    // 模拟API请求
    const res = await uni.request({
      url: "/api/list",
      method: "GET",
      data: {
        page: currentPage.value,
        pageSize,
      },
    });

    // 更新数据
    total.value = res.total;
    list.value = [...list.value, ...res.data];

    // 更新加载状态
    loadStatus.value = list.value.length >= total.value ? "noMore" : "more";
  } catch (error) {
    // 错误处理
    currentPage.value = Math.max(1, currentPage.value - 1);
    loadStatus.value = "more";
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

const scanNewsDetail = () => {
  uni.navigateTo({
    url: "/subPages/news/detail?id=1",
  });
};
</script>

<style lang="scss" scoped>
.news-list-container {
  .news-list-item:first-child {
    margin-top: 0;
  }
}
</style>
